<template>
  <div class="clientType">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" :inline="true" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              placeholder="请输入公司名称"
              v-model="searchForm.companyName"
              style="margin-right: 10px;"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <global-card>
      <template #leftTitle>
        <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
        >
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="productCode" label="商品编码" align="center"/>
          <el-table-column prop="productName" label="商品名称" align="center"/>
          <el-table-column prop="hotAera" label="商品类型" align="center">
            <template #default="{ row }">
              <div>{{hotTypeData[row.hotType].name}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="showUrl" label="商品图片" align="center">
            <template #default="{ row }">
              <viewer class="w-100 h-100">
                <img
                  style="display: inline-block;height: 50px;width: 65px;"
                  :src="row.showUrl"
                  class="w-100 bg-light h-100 obj-cover">
              </viewer>
            </template>
          </el-table-column>
          <el-table-column prop="hotAera" label="区域位置" align="center">
            <template #default="{ row }">
              <div>{{hotAeraData[row.hotAera].name}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template #default="{ row }">
              <perButton label="编辑" type="primary" size="mini" perms="PROTOCOL_ADD"
                         @click="examineClick(row)"></perButton>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>

    <yc-dialog
      ref="ycDialog"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
    >
      <template #content>
        <div class="dialog-content">
          <el-form
            :model="newCompanyModel"
            :rules="rules"
            ref="agreementModelRef"
            label-width="110px"
          >
            <el-form-item label="区域位置" prop="hotAera">
              <el-select v-model="newCompanyModel.hotAera" :disabled="true">
                <el-option
                  v-for="item in hotAeraData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="绑定类型" prop="hotType">
              <el-select v-model="newCompanyModel.hotType" @change="changeProduct">
                <el-option
                  v-for="item in hotTypeData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="商品名称" prop="productCode">
              <el-select v-model="newCompanyModel.productCode" :disabled="!(newCompanyModel.hotType+'')">
                <el-option
                  v-for="item in productData"
                  :key="item.productCode"
                  :label="item.productName"
                  :value="item.productCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="上传照片" prop="showUrl">
              <el-upload
                :action="$uploadUrl + upload"
                class="avatar-uploader"
                v-model="newCompanyModel.showUrl"
                :headers="headers"
                :show-file-list="false"
                :on-success="handleLogoSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="newCompanyModel.showUrl"
                  :src="newCompanyModel.showUrl"
                  class="avatar"
                />
                <i
                  v-else
                  class="el-icon-plus avatar-uploader-icon"
                  :class="{ drop: detailsDisabled }"
                ></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>

    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import perButton from "@/components/permissionButton"
  import {
    queryPageHot,
    queryListHot,
    updateHot,
    setCHotRecommend
  } from "@/api/hotRecommended/index"
  import { queryAccountList } from "@/api/appUserControl/account"
  import { getToken } from "@/utils/auth"

  export default {
    components: {
      ycDialog,
      perButton
    },
    data() {
      return {
        tableData: [],
        pageIndex: 1,
        pageSize: 10,
        count: 0,
        hotAeraData: [
          { id: 0, name: "顶部" },
          { id: 1, name: "中下" },
          { id: 2, name: "左下 " },
          { id: 3, name: "右下" }
        ],
        hotTypeData: [
          { id: 0, name: "普通商品" },
          { id: 1, name: "投资商品" }
        ],
        productData: [],
        searchForm: {
          agreementName: "",
          agreementType: ""
        },

        detailsDisabled: false,
        isGlobalMessageShow: false,

        dialogCenterTitle: "",
        dialogTitle: "",
        message: "",

        loading: false,
        headers: {
          token: getToken()
        },
        upload: "/uploadManager/upload",
        newCompanyModel: {
          id: "",
          hotAera: "",
          hotType: "",
          productCode: "",
          showUrl: ""
        },
        rules: {
          hotAera: [
            { required: true, message: "请选择区域位置", trigger: "change" }
          ],
          hotType: [
            { required: true, message: "请选择绑定类型", trigger: "change" }
          ],
          productCode: [
            { required: true, message: "请选择商品名称", trigger: "change" }
          ],
          showUrl: [
            { required: true, message: "请选择照片", trigger: "change" }
          ]
        },
        userData: [],
        addOrUpdateLoading: false
      }
    },
    created() {
      this.getData()
    },
    methods: {
      async searchClick() {
        await this.getData()
      },
      async getData() {
        const { agreementName, agreementType } = this.searchForm
        this.loading = true
        const data = await queryPageHot({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        })
        this.tableData = data.object.data
        this.count = data.object.count
        this.loading = false
      },
      pagination(pageItem) {
        this.getData(pageItem.page, pageItem.limit)
      },

      // 编辑
      async examineClick(row) {
        this.dialogCenterTitle = "编辑"
        this.dialogTitle = "编辑"

        this.newCompanyModel.id = row.id
        this.newCompanyModel.hotAera = row.hotAera
        this.newCompanyModel.hotType = row.hotType
        this.newCompanyModel.productCode = row.productCode
        this.newCompanyModel.showUrl = row.showUrl

        console.log(this.newCompanyModel.hotType)
        if(String(this.newCompanyModel.hotType)) {
          await this.queryListHot()
        }

        this.detailsDisabled = false
        this.addOrUpdateLoading = false
        this.$refs.ycDialog.dialogVisible = true
      },

      handleLogoSuccess(id, file) {
        this.newCompanyModel.showUrl = file.response.object.url
      },
      beforeAvatarUpload(file) {
        // const isType = this.fileType.includes(file.type)
        const isLt2M = file.size / 1024 / 1024 < 5

        // if (!isJPG) {
        //   this.$message.error("上传头像图片只能是 JPG 格式!")
        // }
        // if (!isType) {
        //   this.$message.error("上传文件格式有问题！")
        // }
        // if (!isLt2M) {
        //   this.$message.error("上传头像图片大小不能超过 5MB!")
        // }
        // return isJPG && isLt2M
        // return isType && isLt2M
      },
      changeProduct(val) {
        this.newCompanyModel.hotType = val
        this.queryListHot()
      },
      async queryListHot() {
        await queryListHot({
          investmentType: this.newCompanyModel.hotType
        }).then(res => {
          this.productData = res.object
        })
      },

      async dialogSave() {
        this.$refs.agreementModelRef.validate(async (v) => {
          if (v) {
            this.addOrUpdateLoading = true
            const { status, message } = await setCHotRecommend({ ...this.newCompanyModel })
            if (status == "200") {
              this.$message({
                message: message,
                type: "success"
              })
              this.getData()
              this.$refs.ycDialog.dialogVisible = false
            }
            this.addOrUpdateLoading = false
          }
        })
      },

      receive() {
        this.isGlobalMessageShow = false
      },

      refresh() {
        this.searchForm = {
          agreementName: "",
          agreementType: ""
        }
        this.getData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .clientType {
    .title-container {
      display: flex;
      justify-content: flex-end;
      margin-right: 20px;

      .left-box {
        display: flex;

        .formClass {
          /*display: flex;*/
          /*margin-right: 20px;*/

          .el-form-item {
            margin-top: 20px;
            margin-bottom: 0;

            .el-input {
              width: 216px;
            }

            .el-select {
              width: 171px;
              margin-left: 10px;
            }

            .el-date-editor {
              width: 336px;
              margin-left: 10px;
            }
          }
        }

        /*.el-button {*/
        /*  // width: 42px;*/
        /*  height: 36px;*/
        /*  margin-top: 20px;*/
        /*}*/
      }
    }
  }
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    /* cursor: no-drop; */
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .drop {
    cursor: no-drop;
  }
</style>
